<template>
  <el-dialog
    append-to-body
    title="新增-抢购商品"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    align="left"
    v-loading="currLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="1400px">
    <el-form ref="form" :model="form" label-width="200px" :rules="rules" v-if="dialogVisible">
      <el-form-item label="抢购-活动" align="left" prop="shopProductStockId">
        <el-select v-model="form.shopSkillId" placeholder="placeholder" @change="generateTimeArr" v-if="form.shopSkillId>0">
          <el-option
            v-for="(item,index) in shopSkillList"
            :key="index"
            :label="item.title+'('+item.day+')'"
            :value="item.id">
          </el-option>
        </el-select>
        <el-tag type="success" v-if="form.shopSkillId===0">暂无抢购活动</el-tag>
      </el-form-item>
      <el-form-item label="抢购-时间段" align="left" prop="shopProductStockId" v-if="form.shopSkillId>0">
        <el-select v-model="form.shopSkillStartTime" placeholder="placeholder">
          <el-option
            v-for="(item,index) in timeArr"
            :key="index"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="抢购-商品型号" align="left" prop="shopProductStockId">
        <shop-product-stock-box ref="shop-product-stock-box" v-if="shopSkillList.length>0" :callback="setStockId" :is-score-stock="0"/>
      </el-form-item>
      <el-form-item label="抢购-价格" align="left" prop="shopSkillPrice">
        <el-input-number :controls="false" :min="0" :max="99999999" v-model="form.shopSkillPrice" style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="抢购-数量" align="left" prop="shopSkillNums">
        <el-input-number v-model.number="form.shopSkillNums"/>
      </el-form-item>
      <el-form-item label="抢购-单人限购数量" align="left" prop="shopSkillLimitNums">
        <el-input-number v-model.number="form.shopSkillLimitNums"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit" :disabled="form.shopSkillId===0">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ShopProductStockBox from '../Common/ShopProductStockBox'

export default {
  name: 'CreateShopSkillProductDialog',
  components: {ShopProductStockBox},
  props: {
    successFunction: Function
  },
  data: function () {
    return {
      info: '创建',
      dialogVisible: false,
      currLoading: false,
      shopSkillList: [],
      timeArr:[],
      form: {
        id: 0,
        shopSkillId: 0,
        shopSkillStartTime: '',
        shopSkillPrice: 0,
        shopSkillNums: 1,
        shopSkillLimitNums: 1,
        shopProductStockId: 0,
      },
      rules: {
        shopSkillPrice: [
          {required: true, message: '请输入 抢购-价格', trigger: ['blur', 'change']},
        ],
        shopSkillNums: [
          {required: true, message: '请输入 抢购-总数量', trigger: ['blur', 'change']},
        ],
        shopSkillLimitNums: [
          {required: true, message: '请输入 抢购-单人限购数量', trigger: ['blur', 'change']},
        ],
        shopProductStockId: [
          {required: true, message: '请选择 抢购-商品', trigger: ['blur', 'change']},
        ],
        shopSkillId: [
          {required: true, message: '请选择 抢购-活动', trigger: ['blur', 'change']},
        ],
        shopSkillStartTime: [
          {required: true, message: '请选择 抢购-时间段', trigger: ['blur', 'change']},
        ],
      }
    }
  },
  mounted () {

  },
  watch: {
    dialogVisible: function () {
      if (!this.dialogVisible) {
        this.setEmptyForm()
      }
    }
  },
  methods: {
    setStockId:function (id) {
      // console.log('shopProductStockId',id)
      this.form.shopProductStockId=id
    },
    getCurrShopSkill:function () {
      let $this=this
      var currShopSkill={}
      $this.shopSkillList.forEach(function (value, index) {
        if ($this.form.shopSkillId===value.id){
          currShopSkill=value
        }
      })
      return currShopSkill
    },
    generateTimeArr:function () {
      var currShopSkill = this.getCurrShopSkill()
      if (!currShopSkill || !currShopSkill.id){
        return
      }
      var timeArrString=this.getCurrShopSkill().timeArr
      var arr=timeArrString.split(',')
      var start=arr[0].replace(':00','')-0
      var end=arr[1].replace(':00','')-0
      var _arr=[]
      for (let i = start; i <end ; i++) {
        _arr.push((i+':00,')+((i+1)+':00'))
      }
      this.timeArr=_arr
      this.form.shopSkillStartTime=_arr[0]
    },
    setEmptyForm: function () {
      this.form = {
        id: 0,
        shopSkillId: 0,
        shopSkillStartTime: '',
        shopSkillPrice: 0,
        shopSkillNums: 1,
        shopSkillLimitNums: 1,
        shopProductStockId: 0,
      }
    },
    getShopSkillList: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'ShopSkill/getShopSkillList', { pageSize: 100,isJoin:true}, function (data) {
        if (data.list.length > 0) {
          $this.shopSkillList = data.list
          $this.form.shopSkillId = data.list[0].id
          $this.generateTimeArr()
        }
        $this.$forceUpdate()
      })
    },
    open: function () {
      this.form = {
        id: 0,
        shopSkillId: 0,
        shopSkillStartTime: '',
        shopSkillPrice: 0,
        shopSkillNums: 1,
        shopSkillLimitNums: 1,
        shopProductStockId: 0,
      }
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
      this.getShopSkillList()
      // this.generateTimeArr('11:00,21:00')
      this.dialogVisible = true
      this.$forceUpdate()
    },
    submit: function () {
      let $this = this
      if ($this.form.shopSkillPrice>=$this.$refs['shop-product-stock-box'].getStockPrice()){
        return $this.$message.error('【抢购金额】必须小于【商品金额】')
      }
      if ($this.form.shopSkillNums>$this.$refs['shop-product-stock-box'].getStockNums()){
        return $this.$message.error('【抢购库存】不能大于【商品总库存】')
      }
      if ($this.form.shopSkillLimitNums>$this.form.shopSkillNums){
        return $this.$message.error('【单人限购数量】必须小于【抢购总库存】')
      }
      if ($this.form.shopSkillPrice<=0){
        return $this.$message.error('【抢购金额】必须大于0')
      }
      $this.$refs.form.validate((valid) => {
        if (valid) {
          var api = 'ShopSkill/join'
          var form = Object.assign({}, $this.form)
          var arr = form.shopSkillStartTime.split(',')
          if (form.nums<=0){
            return $this.$message.error('抢购数量 输入错误')
          }
          if (form.shopSkillNums<=0){
            return $this.$message.error('抢购数量 输入错误')
          }
          if (form.shopSkillLimitNums<=0){
            return $this.$message.error('抢购限购数量 输入错误')
          }
          if (form.shopSkillLimitNums>=form.nums){
            return $this.$message.error("【抢购限购数量】不能大于【抢购数量】")
          }
          form.shopSkillStartTime=arr[0]
          $this.currLoading = true
          $this.MyRequest(this.ApiDoNameShop + api, form, function () {
            $this.$message.success('操作成功')
            $this.currLoading = false
            $this.setEmptyForm()
            $this.dialogVisible = false
            $this.$props.successFunction()
            $this.$forceUpdate()
          }, function (res) {
            $this.$message.error(res.message)
            $this.currLoading = false
            $this.$forceUpdate()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
